<!DOCTYPE html>
<html>

<head>
    <title>下拉列表左右选择</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>

    <script>
        $(function () {
            // alert("下拉列表左右选择");
            // 选中单击去右边
            $("#selectOneToRight").click(function () {
                $("#left option:selected").appendTo($("#right"));
            });

            // 单击全部去右边
            $("#selectAllToRight").click(function () {
                $("#left option").appendTo($("#right"));
            });

            // 选中双击去右边
            $("#left option").dblclick(function () {
                $("#left option:selected").appendTo($("#right"));
            });
        });
    </script>

</head>

<body>

    <table border="1" width="600" align="center">
        <tr>
            <td>
                分类名称
            </td>
            <td>
                <input type="text" value="手机数码" />
            </td>
        </tr>
        <tr>
            <td>
                分类描述
            </td>
            <td>
                <textarea rows="4" cols="20">手机数码类商品</textarea>
            </td>
        </tr>

        <tr>
            <td>
                分类商品
            </td>
            <td>
                <span style="float: left;">
                    <font style="color: green;">已有商品</font><br />
                    <select multiple="multiple" style="width: 100px; height: 200px;" id="left">
                        <option>IPhone6s</option>
                        <option>小米4</option>
                        <option>锤子T2</option>
                    </select>
                    <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">&gt;&gt;</a></p>
                    <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">&gt;&gt;&gt;</a></p>
                </span>
                <span style="float: right;">
                    <font style="color: red;">未有商品</font> <br />
                    <select multiple="multiple" style="width: 100px; height: 200px;" id="right">
                        <option>三星Note3</option>
                        <option>华为6s</option>
                    </select>
                    <p><a href="#">&lt;&lt;</a></p>
                    <p><a href="#">&lt;&lt;&lt;</a></p>
                </span>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="修改" />
            </td>
        </tr>
    </table>
</body>

</html>